import { ScrollView, Text, View } from "@tarojs/components";
import HeaderSearch from "@/components/HeaderSearch/index";
import Header from "@/components/Header/index";
import Footer from "@/components/Footer/index";
import GoodsTitle from "@/components/GoodsTitle/index";
import Button from "@taroify/core/button/button";
import { useEffect, useRef, useState } from "react";
import { requestPOST } from "@/request";
import {
  Cell,
  ConfigProvider,
  Dialog,
  Field,
  Form,
  Image,
  Input,
  Pagination,
  Popup,
  Toast,
  Uploader,
  Picker,
  Checkbox,
  Switch,
  Radio,
  Textarea,
} from "@taroify/core";
import { PhotoFail, ArrowDown } from "@taroify/icons";
import Taro from "@tarojs/taro";
import { FormInstance, FormItemInstance } from "@taroify/core/form";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import videoPng from "@/assets/images/video.png";

export default function Index() {
  const businessId = useSelector(
    (state: RootState) => state.business.businessId
  );

  const [active, setActive] = useState(1);
  const [list, setList] = useState<any>([]);
  const [current, setCurrent] = useState(1);
  const [count, setCount] = useState(0);
  const [open, setOpen] = useState(false);
  const id = new Date().valueOf().toString();
  const [form, setForm] = useState<any>({
    id: "",
    image: "",
    isRefund: 0,
    isShopHot: 0,
    isShopRecommend: 0,
    isShopNew: 0,
    status: 0,
    isPromotion: 0,
    promotionCommission: "0",
    skuParentList: [
      {
        skuCommodityName: "",
        skuName: "",
        skuChildList: [
          {
            skuValue: "",
            skuValueId: id,
            skuImgUrl: "",
          },
        ],
      },
    ],
    skuItemList: [
      {
        skuSerialNumber: "OGS001",
        specificationsName: "",
        presentPrice: "",
        originalUnit: "",
        stock: "",
        volumeWide: "",
        volumeLong: "",
        volumeHigh: "",
        weight: "",
        samples: "",
        skuValueArray: id,
      },
    ],
  });

  const createSkuItemList = (form) => {
    let result: any = [];
    if (
      form.skuParentList &&
      form.skuParentList[0] &&
      form.skuParentList[0].skuChildList &&
      form.skuParentList[0].skuChildList.length
    ) {
      form.skuParentList[0].skuChildList.forEach((item) => {
        if (
          form.skuParentList &&
          form.skuParentList[1] &&
          form.skuParentList[1].skuChildList &&
          form.skuParentList[1].skuChildList.length
        ) {
          form.skuParentList[1].skuChildList.forEach((item1) => {
            let obj = {
              skuSerialNumber: "OGS001",
              specificationsName: "",
              presentPrice: "",
              originalUnit: "",
              originalUnitName: "",
              stock: "",
              minNum: "",
              minNumUnit: "",
              minNumUnitName: "",
              samples: "",
              skuValueArray: `${item.skuValueId};${item1.skuValueId}`,
            };
            result.push(obj);
          });
        } else {
          let obj = {
            skuSerialNumber: "OGS001",
            specificationsName: "",
            presentPrice: "",
            originalUnit: "",
            originalUnitName: "",
            stock: "",
            minNum: "",
            minNumUnit: "",
            minNumUnitName: "",
            samples: "",
            skuValueArray: `${item.skuValueId}`,
          };
          result.push(obj);
        }
      });
      console.log(result);
      setForm({ ...form, skuItemList: [...result] });
    }
  };

  const [form1, setForm1] = useState<any>({
    presentPrice: "",
    originalUnit: "",
    stock: "",
    volumeWide: "",
    volumeLong: "",
    volumeHigh: "",
    weight: "",
    samples: "",
  });

  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);
  const itemRef = useRef<FormItemInstance>();
  const itemRef1 = useRef<FormItemInstance>();
  const [productList, setProductList] = useState<any>([]);
  const [shipment, setShipment] = useState<any>([]);
  const originalUnitRef = useRef<FormItemInstance>();
  const minNumUnitRef = useRef<FormItemInstance>();
  const [open5, setOpen5] = useState(false);
  const [open6, setOpen6] = useState(false);
  const [open7, setOpen7] = useState(false);
  const [open8, setOpen8] = useState(false);
  const currentIndex = useRef("");

  const onUpload1 = (index, index1) => {
    Taro.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
    }).then(({ tempFiles, tempFilePaths }) => {
      const size = tempFiles[0].size;
      if (size > 500 * 1024) {
        return Toast.open({ type: "fail", message: "大小超过500kb无法上传" });
      }
      Taro.showLoading({
        title: "上传中...",
      });
      Taro.uploadFile({
        url: process.env.TARO_APP_API + "/other/upload",
        filePath: tempFilePaths[0],
        name: "file",
        success(res) {
          Taro.hideLoading();
          const { relativeUrl } = JSON.parse(res.data).data;
          form.skuParentList[index].skuChildList[index1].skuImgUrl =
            relativeUrl;
          setForm({
            ...form,
          });
          Toast.open({ type: "success", message: "上传成功" });
        },
        fail() {
          Toast.open({ type: "fail", message: "upload error" });
        },
      });
    });
  };

  const getList = (page?: number, active1?: number) => {
    requestPOST("shop/shopCommodityDetailList", {
      pageTotal: 51,
      pageNum: page || current,
      pageSize: 6,
      categoryId: 0,
      status: active1 === undefined ? active : active1,
    }).then((res: any) => {
      setCount(Math.ceil(res.total / 6));
      setList([...res.vos]);
    });
  };

  const handleChange = (page) => {
    setCurrent(page);
    getList(page);
  };

  const delGoods = (item) => {
    Dialog.confirm({
      title: "提示",
      message: "您确定要删除吗？",
      onConfirm() {
        requestPOST(`shop/shopDelCommodity/${item.id}`).then(() => {
          Toast.open({ type: "success", message: "操作成功" });
          setCurrent(1);
          getList(1);
        });
      },
    });
  };

  const shangjia = (item) => {
    Dialog.confirm({
      title: "提示",
      message: "您确定要操作吗？",
      onConfirm() {
        requestPOST(`shop/shopUpAndDownCommodity/${item.id}`).then(() => {
          Toast.open({ type: "success", message: "操作成功" });
          setCurrent(1);
          getList(1);
        });
      },
    });
  };

  const onSubmit = () => {
    if (!form.image) {
      return Toast.open({ type: "fail", message: "请选择展示图片" });
    }
    if (!form.categoryId) {
      return Toast.open({ type: "fail", message: "请选择产品分类" });
    }
    if (form.isPromotion && form.promotionCommission == "") {
      return Toast.open({ type: "fail", message: "请输入推广提成" });
    }
    if (!form.originalUnit) {
      return Toast.open({ type: "fail", message: "请选择价格类型" });
    }
    if (!form.minNumUnit) {
      return Toast.open({ type: "fail", message: "请选择最少订购量类型" });
    }

    if (form.skuParentList && form.skuParentList.length) {
      for (let i = 0; i < form.skuParentList.length; i++) {
        if (!form.skuParentList[i].skuName) {
          return Toast.open({ type: "fail", message: "请选择规格" });
        }
        if (
          form.skuParentList[i].skuChildList &&
          form.skuParentList[i].skuChildList.length
        ) {
          for (let j = 0; j < form.skuParentList[i].skuChildList.length; j++) {
            if (!form.skuParentList[i].skuChildList[j].skuValue) {
              return Toast.open({ type: "fail", message: "请输入选项名称" });
            }
            if (i == 0 && !form.skuParentList[i].skuChildList[j].skuImgUrl) {
              return Toast.open({ type: "fail", message: "请上传选项图片" });
            }
          }
        }
        form.skuParentList[i].skuCommodityName = form.skuCommodityName;
      }
    }
    if (form.skuItemList && form.skuItemList.length) {
      for (let i = 0; i < form.skuItemList.length; i++) {
        if (
          !form.skuItemList[i].specificationsName ||
          !form.skuItemList[i].presentPrice ||
          !form.skuItemList[i].stock
        ) {
          return Toast.open({
            type: "fail",
            message: "SKU列表有没有填写的内容",
          });
        }
      }
    }
    if (!form.detailsImage) {
      return Toast.open({ type: "fail", message: "请选择产品主图" });
    }

    requestPOST(form.id ? "shop/shopEditCommodity" : "shop/shopAddCommodity", {
      ...form,
      isRefund: Number(form.isRefund),
      isShopHot: Number(form.isShopHot),
      isShopRecommend: Number(form.isShopRecommend),
      isShopNew: Number(form.isShopNew),
      status: Number(form.status),
      isPromotion: Number(form.isPromotion),
    }).then(() => {
      Toast.open({
        type: "success",
        message: form.id ? "修改成功" : "添加成功",
      });
      setOpen(false);
      getList();
      clearForm();
    });
  };

  const onUpload = (key, limit = 0, type = "img") => {
    if (type === "img") {
      Taro.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
      }).then(({ tempFiles, tempFilePaths }) => {
        const size = tempFiles[0].size;
        if (size > 500 * 1024) {
          return Toast.open({ type: "fail", message: "大小超过500kb无法上传" });
        }
        Taro.showLoading({
          title: "上传中...",
        });
        Taro.uploadFile({
          url: process.env.TARO_APP_API + "/other/upload",
          filePath: tempFilePaths[0],
          name: "file",
          success(res) {
            Taro.hideLoading();
            const { relativeUrl } = JSON.parse(res.data).data;
            setForm({
              ...form,
              [key]: limit
                ? `${form[key] ? form[key] + "," : ""}${relativeUrl}`
                : relativeUrl,
            });
          },
          fail() {
            Toast.open({ type: "fail", message: "upload error" });
          },
        });
      });
    } else {
      Taro.chooseMedia({
        count: 1,
        mediaType: ["video"],
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
      }).then(({ tempFiles }) => {
        Taro.showLoading({
          title: "上传中...",
        });

        Taro.uploadFile({
          url: process.env.TARO_APP_API + "/other/upload",
          filePath: tempFiles[0].tempFilePath,
          name: "file",
          success(res) {
            Taro.hideLoading();
            const { relativeUrl } = JSON.parse(res.data).data;
            setForm({
              ...form,
              [key]: limit
                ? `${form[key] ? form[key] + "," : ""}${relativeUrl}`
                : relativeUrl,
            });
          },
          fail() {
            Toast.open({ type: "fail", message: "upload error" });
          },
        });
      });
    }
  };

  const priviewImage = (sources, current, type = "image") => {
    sources =
      sources &&
      sources
        .split(",")
        .map((item) => ({ url: process.env.TARO_APP_API + item, type }));

    Taro.previewMedia({
      sources: sources || [],
      current: current,
    });
  };
  let result: any = [];
  const getProductList = () => {
    result = [];
    requestPOST(`shop/shopCategoryList/${businessId}`).then((res: any) => {
      res.map((item) => {
        result.push({
          categoryName: item.categoryName,
          id: item.id,
          parentId: item.parentId,
        });
        getChildrenList(item);
      });
      setProductList([...result]);
    });
  };

  const getChildrenList = (data) => {
    if (data.children && data.children.length) {
      data.children.forEach((item) => {
        result.push({
          categoryName: item.categoryName,
          id: item.id,
          parentId: item.parentId,
        });
        getChildrenList(item);
      });
    }
  };

  const getShiment = () => {
    requestPOST(`other/getDictLabel/mode_of_shipment`).then((res: any) => {
      setShipment([...res].map((item) => ({ ...item, select: false })));
    });
  };

  const [unit, setUnit] = useState<any>([]);
  const [open3, setOpen3] = useState<any>(false);

  const getUnit = () => {
    requestPOST("other/getDictLabel/original_unit").then((res: any) => {
      setUnit(
        [...res].map((item) => ({
          ...item,
          label: item.dictLabel,
          value: item.dictValue,
        }))
      );
    });
  };

  const [moneys, setMoneys] = useState<any>([]);
  const [open4, setOpen4] = useState<any>(false);

  const getMoneys = () => {
    requestPOST("other/getDictLabel/min_num_unit").then((res: any) => {
      setMoneys(
        [...res].map((item) => ({
          ...item,
          label: item.dictLabel,
          value: item.dictValue,
        }))
      );
    });
  };

  const [discountsTypes, setDiscountsTypes] = useState<any>([]);

  const getDiscountsTypes = () => {
    requestPOST("other/getDictLabel/discounts_type").then((res: any) => {
      setDiscountsTypes(
        [...res].map((item) => ({
          ...item,
          label: item.dictLabel,
          value: Number(item.dictValue),
        }))
      );
    });
  };

  const batchEditing = () => {
    for (let key in form1) {
      if (form1[key] !== "") {
        form.skuItemList.forEach((item) => {
          item[key] = form1[key];
        });
      }
    }
    setForm({ ...form });
    Toast.open({ type: "success", message: "批量编辑成功" });
  };

  const formRef = useRef<any>();
  const clearForm = () => {
    setForm({
      id: "",
      image: "",
      isRefund: 0,
      isShopHot: 0,
      isShopRecommend: 0,
      isShopNew: 0,
      status: 0,
      isPromotion: 0,
      promotionCommission: "0",
      skuParentList: [
        {
          skuCommodityName: "",
          skuName: "",
          skuChildList: [
            {
              skuValue: "",
              skuValueId: id,
              skuImgUrl: "",
            },
          ],
        },
      ],
      skuItemList: [
        {
          skuSerialNumber: "OGS001",
          specificationsName: "",
          presentPrice: "",
          originalUnit: "",
          originalUnitName: "",
          stock: "",
          minNum: "",
          minNumUnit: "",
          minNumUnitName: "",
          samples: "",
          skuValueArray: id,
        },
      ],
    });
    setForm1({
      presentPrice: "",
      originalUnit: "",
      originalUnitName: "",
      minNumUnitName: "",
      stock: "",
      minNum: "",
      minNumUnit: "",
      samples: "",
    });
    originalUnitRef.current?.setValue("");
    minNumUnitRef.current?.setValue("");
    formRef.current?.reset();
  };

  const editGoods = (item) => {
    requestPOST(`shop/shopCommodityDetail/${item.id}`).then((res: any) => {
      const skuItemList = res.skuItemList.map((item2) => ({
        ...item2,
      }));
      setForm({
        ...res,
        detailsImage: res.detailsImage.join(","),
        originalUnitName: unit.find((item1) => item1.label == res.originalUnit)
          .label,
        minNumUnitName: moneys.find((item1) => item1.value == res.minNumUnit)
          .label,
        isRefund: Boolean(res.isRefund),
        isShopHot: Boolean(res.isShopHot),
        isShopRecommend: Boolean(res.isShopRecommend),
        isShopNew: Boolean(res.isShopNew),
        status: Boolean(res.status),
        isPromotion: Boolean(res.isPromotion),
        skuItemList: skuItemList,
      });
      setOpen(true);
      Taro.nextTick(() => {
        if (res.categoryId) {
          itemRef.current?.setValue(
            res.categoryId
              .split(",")
              .map(
                (item2) =>
                  productList.find((item1) => Number(item2) == item1.id)
                    ?.categoryName
              )
              .join(",")
          );
        }
        if (res.modeOfShipment) {
          itemRef1.current?.setValue(
            res.modeOfShipment
              .split(",")
              .map(
                (item2) =>
                  shipment.find((item1) => item2 == item1.dictLabel)?.dictLabel
              )
              .join(",")
          );
        }
      });
    });
  };

  const dowloadFile = () => {
    Dialog.confirm({
      title: "提示",
      message: "您确定要下载吗？",
      onConfirm() {
        Taro.request({
          url: process.env.TARO_APP_API + "/shop/downModel",
          method: "POST",
          responseType: "arraybuffer",
          header: {
            Authorization: Taro.getStorageSync("token"),
          },
        }).then((res) => {
          const arrayBuffer = res.data;
          const fs = Taro.getFileSystemManager();
          const filePath = `${Taro.env.USER_DATA_PATH}/订单.xlsx`;

          try {
            fs.writeFileSync(filePath, arrayBuffer, "binary");
          } catch (e) {
            console.log(e);
          }

          fs.saveFile({
            tempFilePath: filePath,
            success: (res) => {
              Toast.open({
                type: "success",
                message: `保存成功: ${res.savedFilePath}`,
              });
            },
            fail: (e) => {
              console.log(e);
              Toast.open({ message: "保存失败", type: "fail" });
            },
          });
        });
      },
    });
  };

  const uploadFileExcel = () => {
    Taro.chooseMessageFile({
      type: "file",
      count: 1,
      extension: ["xlsx", "xls"], // 限制 Excel 格式
    }).then(({ tempFiles }) => {
      Taro.uploadFile({
        url: process.env.TARO_APP_API + "/shop/importCommodity",
        filePath: tempFiles[0].path,
        header: {
          Authorization: Taro.getStorageSync("token"),
        },
        name: "file",
        success(res) {
          const data = JSON.parse(res.data);
          if (data.code === 200) {
            Toast.open({ type: "success", message: "上传成功" });
            getList();
          } else {
            Toast.open({ type: "fail", message: "上传失败" });
          }
        },
        fail() {
          Toast.open({ type: "fail", message: "上传失败" });
        },
      });
    });
  };

  const [show1, setShow] = useState(false);
  // const storForm = Taro.getStorageSync("form");
  // if (storForm) {
  //   setShow(true);
  // }

  const saveLocal = () => {
    Taro.setStorageSync("form", { ...form, id: "" });
    Toast.open({ type: "success", message: "保存成功" });
    setOpen(false);
    setShow(true);
  };

  const clearLocal = () => {
    Dialog.confirm({
      title: "提示",
      message: "是否要清空缓存",
      backdrop: {
        style: { zIndex: 1010 },
      },
      style: {
        zIndex: 1011,
      },
      onConfirm() {
        Taro.removeStorageSync("form");
        setShow(false);
        Toast.open({ type: "success", message: "清空成功" });
      },
    });
  };

  const uploadProduct = () => {
    const storForm = Taro.getStorageSync("form");
    if (storForm) {
      setShow(true);
      Dialog.confirm({
        title: "提示",
        message: "检测到有未提交的表单数据，是否恢复？",
        onConfirm() {
          setForm({ ...storForm });
          setOpen(true);
        },
        onCancel() {
          setOpen(true);
        },
      });
    } else {
      setOpen(true);
    }
  };

  useEffect(() => {
    getList();
    getProductList();
    getShiment();
    getUnit();
    getMoneys();
    getDiscountsTypes();
  }, []);

  return (
    <View className="taroBox">
      <HeaderSearch />
      <Header />
      <View>
        <GoodsTitle title="产品管理" isMore={false} />
        <View style={{ padding: ".875rem" }}>
          <View
            style={{ display: "flex", alignItems: "center", gap: ".625rem" }}
          >
            <Button
              size="small"
              variant={active == 1 ? "contained" : "outlined"}
              color="primary"
              onClick={() => {
                setActive(1);
                setCurrent(1);
                getList(1, 1);
              }}
            >
              上架
            </Button>
            <Button
              size="small"
              variant={active == 0 ? "contained" : "outlined"}
              color="primary"
              onClick={() => {
                setActive(0);
                setCurrent(1);
                getList(1, 0);
              }}
            >
              下架
            </Button>
          </View>
          <View
            style={{
              display: "flex",
              alignItems: "center",
              gap: ".625rem",
              marginTop: ".625rem",
            }}
          >
            <Button size="small" color="warning" onClick={() => dowloadFile()}>
              下载模版
            </Button>
            <Button
              size="small"
              color="primary"
              onClick={() => uploadProduct()}
            >
              上传产品
            </Button>
            <Button size="small" color="info" onClick={() => uploadFileExcel()}>
              批量上传
            </Button>
          </View>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "1.25rem",
              marginTop: ".625rem",
            }}
          >
            {list.map((item) => (
              <View
                key={item.id}
                style={{
                  padding: ".625rem",
                  boxShadow: "0 0 5px 0 hsla(0, 0%, 49%, 0.45)",
                  fontSize: ".875rem",
                }}
              >
                <View style={{ display: "flex", gap: ".625rem" }}>
                  <View style={{ width: "6.25rem" }}>
                    <Image
                      src={process.env.TARO_APP_API + item.image}
                      width={100}
                      height={154}
                      mode="aspectFill"
                      fallback={<PhotoFail />}
                    />
                  </View>
                  <View
                    style={{
                      flex: "1",
                      display: "flex",
                      flexDirection: "column",
                      gap: ".25rem",
                    }}
                  >
                    <View>{item.commodityName}</View>
                    <View>库存：{item.stock}</View>
                    <View>状态：{item.status ? "上架" : "下架"}</View>
                    <View
                      style={{
                        fontSize: "1rem",
                        textAlign: "right",
                      }}
                    >
                      ${item.presentPrice}
                    </View>
                  </View>
                </View>

                <View
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: ".625rem",
                    marginTop: ".625rem",
                  }}
                >
                  <Button
                    size="small"
                    color="danger"
                    variant="outlined"
                    onClick={() => delGoods(item)}
                  >
                    删除
                  </Button>
                  <Button
                    size="small"
                    color="warning"
                    variant="outlined"
                    onClick={() => shangjia(item)}
                  >
                    {active ? "下架" : "上架"}
                  </Button>
                  <Button
                    size="small"
                    color="primary"
                    variant="outlined"
                    onClick={() => editGoods(item)}
                  >
                    编辑
                  </Button>
                </View>
              </View>
            ))}
          </View>
        </View>

        <View style={{ marginBlock: "20px", padding: "0 14px" }}>
          <Pagination
            current={current}
            siblingCount={1}
            count={count}
            onChange={(page) => handleChange(page)}
          >
            <Pagination.Item type="start-ellipsis" />
            <Pagination.Item type="end-ellipsis" />
          </Pagination>
        </View>
      </View>
      <Footer />

      <Popup
        open={open}
        placement="center"
        style={{ height: "auto" }}
        rounded
        onClose={() => {
          setOpen(false);
          clearForm();
        }}
        lock={false}
      >
        <ScrollView style={{ maxHeight: "90vh" }} scrollY>
          <View style={{ width: "90vw", padding: ".875rem" }}>
            <Form ref={formRef} onSubmit={() => onSubmit()}>
              <Cell.Group style={{ margin: 0 }} inset>
                <Form.Item name="commodityName">
                  <Form.Label>产品名称</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入产品名称"
                      value={form.commodityName}
                      onChange={(e) =>
                        setForm({ ...form, commodityName: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="commodityTitle">
                  <Form.Label>品牌</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入品牌"
                      value={form.commodityTitle}
                      onChange={(e) =>
                        setForm({ ...form, commodityTitle: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item style={{ flexDirection: "column", gap: ".625rem" }}>
                  <Form.Label style={{ width: "100%" }}>
                    <Text>
                      展示图片
                      <Text style={{ fontSize: ".75rem", color: "red" }}>
                        推荐尺寸 800*800,图片最大不能超过500KB
                      </Text>
                    </Text>
                  </Form.Label>
                  <Form.Control>
                    <Uploader>
                      <View
                        style={{
                          display: "flex",
                          flexWrap: "wrap",
                          gap: ".3125rem",
                        }}
                      >
                        {form.image && (
                          <Uploader.Image
                            url={process.env.TARO_APP_API + form.image}
                            mode="aspectFill"
                            onClick={(e) => {
                              e.preventDefault();
                              e.stopPropagation();
                              priviewImage(form.image, 0);
                            }}
                            onRemove={(e) => {
                              e.preventDefault();
                              e.stopPropagation();
                              setForm({ ...form, image: "" });
                            }}
                          ></Uploader.Image>
                        )}
                        {!form.image && (
                          <Uploader.Upload
                            onClick={() => onUpload("image", 0)}
                          />
                        )}
                      </View>
                    </Uploader>
                  </Form.Control>
                </Form.Item>
                <Form.Item name="categoryId">
                  <Form.Control>
                    <Field
                      label="产品分类"
                      ref={itemRef}
                      name="picker"
                      clickable
                      isLink
                      style={{ padding: "0rem" }}
                    >
                      <Input
                        readonly
                        placeholder="请选择产品分类"
                        onClick={() => setOpen1(true)}
                      />
                    </Field>
                  </Form.Control>
                </Form.Item>
                <Form.Item name="modeOfShipment">
                  <Form.Control>
                    <Field
                      label="运输方式"
                      ref={itemRef1}
                      name="picker1"
                      clickable
                      isLink
                      style={{ padding: "0rem" }}
                    >
                      <Input
                        readonly
                        placeholder="请选择运输方式"
                        onClick={() => setOpen2(true)}
                      />
                    </Field>
                  </Form.Control>
                </Form.Item>
                <Form.Item name="isRefund">
                  <Form.Label>是否30天无理由退款</Form.Label>
                  <Form.Control>
                    <Switch
                      size="20px"
                      checked={form.isRefund}
                      onChange={(value) =>
                        setForm({ ...form, isRefund: value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="isShopHot">
                  <Form.Label>是否商家热门</Form.Label>
                  <Form.Control>
                    <Switch
                      size="20px"
                      checked={form.isShopHot}
                      onChange={(value) =>
                        setForm({ ...form, isShopHot: value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="isShopRecommend">
                  <Form.Label>是否商家精品推荐</Form.Label>
                  <Form.Control>
                    <Switch
                      size="20px"
                      checked={form.isShopRecommend}
                      onChange={(value) =>
                        setForm({ ...form, isShopRecommend: value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="isShopNew">
                  <Form.Label>是否商家新品</Form.Label>
                  <Form.Control>
                    <Switch
                      size="20px"
                      checked={form.isShopNew}
                      onChange={(value) =>
                        setForm({ ...form, isShopNew: value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="status">
                  <Form.Label>是否上下架产品</Form.Label>
                  <Form.Control>
                    <Switch
                      size="20px"
                      checked={form.status}
                      onChange={(value) => setForm({ ...form, status: value })}
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="isPromotion">
                  <Form.Label>是否推广产品</Form.Label>
                  <Form.Control>
                    <Switch
                      size="20px"
                      checked={form.isPromotion}
                      onChange={(value) =>
                        setForm({ ...form, isPromotion: value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="promotionCommission">
                  <Form.Label>推广提成</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入推广提成"
                      value={form.promotionCommission}
                      onChange={(e) =>
                        setForm({
                          ...form,
                          promotionCommission: e.detail.value,
                        })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="hotSort">
                  <Form.Label>热门排序</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入热门排序"
                      value={form.hotSort}
                      onChange={(e) =>
                        setForm({ ...form, hotSort: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="recommendSort">
                  <Form.Label>推荐精品排序</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入推荐精品排序"
                      value={form.recommendSort}
                      onChange={(e) =>
                        setForm({ ...form, recommendSort: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="newSort">
                  <Form.Label>新品排序</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入新品排序"
                      value={form.newSort}
                      onChange={(e) =>
                        setForm({ ...form, newSort: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="presentPrice">
                  <Form.Label>当前价格</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入当前价格"
                      value={form.presentPrice}
                      onChange={(e) =>
                        setForm({ ...form, presentPrice: e.detail.value })
                      }
                    />
                    <View
                      onClick={() => setOpen3(true)}
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: "5px",
                        fontSize: "12px",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {form.originalUnitName || "请选择"}
                      <ArrowDown />
                    </View>
                  </Form.Control>
                </Form.Item>
                <Form.Item name="minNum">
                  <Form.Label>最少订购量</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入最少订购量"
                      value={form.minNum}
                      onChange={(e) =>
                        setForm({ ...form, minNum: e.detail.value })
                      }
                    />
                    <View
                      onClick={() => setOpen4(true)}
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: "5px",
                        fontSize: "12px",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {form.minNumUnitName || "请选择"}
                      <ArrowDown />
                    </View>
                  </Form.Control>
                </Form.Item>
                <Form.Item name="discountsType">
                  <Form.Label>优惠价格类型</Form.Label>
                  <Form.Control>
                    <Radio.Group
                      value={form.discountsType}
                      onChange={(value) =>
                        setForm({ ...form, discountsType: value })
                      }
                    >
                      {discountsTypes.map((item) => (
                        <Radio name={item.value}>{item.label}</Radio>
                      ))}
                    </Radio.Group>
                  </Form.Control>
                </Form.Item>
                {form.discountsType == 1 && (
                  <Form.Item name="fullDecreaseQuantity">
                    <Form.Label>满减数量</Form.Label>
                    <Form.Control>
                      <Input
                        placeholder="请输入满减数量"
                        value={form.fullDecreaseQuantity}
                        onChange={(e) =>
                          setForm({
                            ...form,
                            fullDecreaseQuantity: e.detail.value,
                          })
                        }
                      />
                    </Form.Control>
                  </Form.Item>
                )}
                {form.discountsType == 2 && (
                  <View>
                    <Form.Item name="gtNumberMin">
                      <Form.Label>区间优惠最低订购量</Form.Label>
                      <Form.Control>
                        <Input
                          placeholder="请输入区间优惠最低订购量"
                          value={form.gtNumberMin}
                          onChange={(e) =>
                            setForm({ ...form, gtNumberMin: e.detail.value })
                          }
                        />
                      </Form.Control>
                    </Form.Item>
                    <Form.Item name="gtNumberMax">
                      <Form.Label>区间优惠最高订购量</Form.Label>
                      <Form.Control>
                        <Input
                          placeholder="请输入区间优惠最高订购量"
                          value={form.gtNumberMax}
                          onChange={(e) =>
                            setForm({ ...form, gtNumberMax: e.detail.value })
                          }
                        />
                      </Form.Control>
                    </Form.Item>
                    <Form.Item name="gtNumberPrice">
                      <Form.Label>优惠区间价格</Form.Label>
                      <Form.Control>
                        <Input
                          placeholder="请输入优惠区间价格"
                          value={form.gtNumberPrice}
                          onChange={(e) =>
                            setForm({ ...form, gtNumberPrice: e.detail.value })
                          }
                        />
                      </Form.Control>
                    </Form.Item>
                    <Form.Item name="gtNumberDiscounts">
                      <Form.Label>区间最大优惠订购量</Form.Label>
                      <Form.Control>
                        <Input
                          placeholder="请输入区间最大优惠订购量"
                          value={form.gtNumberDiscounts}
                          onChange={(e) =>
                            setForm({
                              ...form,
                              gtNumberDiscounts: e.detail.value,
                            })
                          }
                        />
                      </Form.Control>
                    </Form.Item>
                    <Form.Item name="gtNumberDiscountsPrice">
                      <Form.Label>最大优惠订购量价格</Form.Label>
                      <Form.Control>
                        <Input
                          placeholder="请输入最大优惠订购量价格"
                          value={form.gtNumberDiscountsPrice}
                          onChange={(e) =>
                            setForm({
                              ...form,
                              gtNumberDiscountsPrice: e.detail.value,
                            })
                          }
                        />
                      </Form.Control>
                    </Form.Item>
                  </View>
                )}
                <Form.Item name="specifications">
                  <Form.Label>产品规格</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入产品规格"
                      value={form.specifications}
                      onChange={(e) =>
                        setForm({ ...form, specifications: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="stock">
                  <Form.Label>库存</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入库存"
                      value={form.stock}
                      onChange={(e) =>
                        setForm({ ...form, stock: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item name="freightCharge">
                  <Form.Label>运费</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入运费"
                      value={form.freightCharge}
                      onChange={(e) =>
                        setForm({ ...form, freightCharge: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>

                <View
                  style={{
                    borderTop: "5px solid #efefef",
                    borderBottom: "5px solid #efefef",
                    padding: "10px 0",
                  }}
                >
                  {form.skuParentList.length < 2 && (
                    <View style={{ padding: "10px 50px" }}>
                      <Button
                        block
                        size="small"
                        color="primary"
                        variant="outlined"
                        onClick={() => {
                          form.skuParentList.push({
                            skuCommodityName: "",
                            skuName: "",
                            skuChildList: [
                              {
                                skuValue: "",
                                skuValueId: new Date().valueOf().toString(),
                                skuImgUrl: "",
                              },
                            ],
                          });
                          createSkuItemList(form);
                        }}
                      >
                        添加规格
                      </Button>
                    </View>
                  )}
                  <View
                    style={{
                      fontSize: "14px",
                      color: "#555",
                      padding: "10px 0",
                    }}
                  >
                    规格1可以设置图片
                  </View>
                  {form.skuParentList &&
                    form.skuParentList.length &&
                    form.skuParentList.map((item, index) => (
                      <View>
                        <Form.Item name="skuName">
                          <Form.Label>规格{index + 1}</Form.Label>
                          <Form.Control>
                            <Radio.Group
                              value={item.skuName}
                              onChange={(value) => {
                                form.skuParentList.splice(index, 1, {
                                  ...item,
                                  skuName: value,
                                });
                                setForm({ ...form });
                              }}
                            >
                              <Radio
                                name="Color"
                                disabled={
                                  index
                                    ? form.skuParentList[index - 1]?.skuName ===
                                      "Color"
                                    : form.skuParentList[index + 1]?.skuName ===
                                      "Color"
                                }
                              >
                                颜色_Color
                              </Radio>
                              <Radio
                                name="Size"
                                disabled={
                                  index
                                    ? form.skuParentList[index - 1]?.skuName ===
                                      "Size"
                                    : form.skuParentList[index + 1]?.skuName ===
                                      "Size"
                                }
                              >
                                尺码_Size
                              </Radio>
                              <Radio
                                name="Specification"
                                disabled={
                                  index
                                    ? form.skuParentList[index - 1]?.skuName ===
                                      "Specifications"
                                    : form.skuParentList[index + 1]?.skuName ===
                                      "Specifications"
                                }
                              >
                                规格_Specifications
                              </Radio>
                            </Radio.Group>
                          </Form.Control>
                        </Form.Item>
                        <View style={{ marginTop: "10px" }}>
                          <Button
                            size="small"
                            color="primary"
                            variant="outlined"
                            onClick={() => {
                              form.skuParentList[index].skuChildList.push({
                                skuValue: "",
                                skuValueId: new Date().valueOf().toString(),
                                skuImgUrl: "",
                              });
                              createSkuItemList(form);
                            }}
                          >
                            添加选项
                          </Button>
                          {item.skuChildList &&
                            item.skuChildList.length &&
                            item.skuChildList.map((item1, index1) => (
                              <Field label="选项名称">
                                <Input
                                  placeholder="请输入选项名称"
                                  value={item1.skuValue}
                                  onChange={(e) => {
                                    form.skuParentList[index].skuChildList[
                                      index1
                                    ].skuValue = e.detail.value;
                                    setForm({
                                      ...form,
                                    });
                                  }}
                                />
                                {item.skuChildList.length > 1 && (
                                  <Button
                                    color="danger"
                                    size="small"
                                    variant="outlined"
                                    onClick={() => {
                                      form.skuParentList[
                                        index
                                      ].skuChildList.splice(index1, 1);
                                      setForm({
                                        ...form,
                                      });
                                    }}
                                  >
                                    删除
                                  </Button>
                                )}
                              </Field>
                            ))}

                          {index === 0 && (
                            <View
                              style={{
                                display: "flex",
                                flexWrap: "wrap",
                                alignContent: "center",
                                marginTop: "10px",
                              }}
                            >
                              {item.skuChildList &&
                                item.skuChildList.length &&
                                item.skuChildList.map((item1, index1) => (
                                  <View>
                                    <Uploader
                                      value={
                                        item1.skuImgUrl
                                          ? [
                                              {
                                                url:
                                                  process.env.TARO_APP_API +
                                                  item1.skuImgUrl,
                                              },
                                            ]
                                          : []
                                      }
                                      onUpload={() => onUpload1(index, index1)}
                                      onChange={() => {
                                        form.skuParentList[index].skuChildList[
                                          index1
                                        ].skuImgUrl = "";
                                        setForm({
                                          ...form,
                                        });
                                      }}
                                      maxFiles={1}
                                    />
                                    <View
                                      style={{
                                        fontSize: "12px",
                                        width: "80px",
                                        textOverflow: "ellipsis",
                                        overflow: "hidden",
                                        whiteSpace: "nowrap",
                                      }}
                                    >
                                      {item1.skuValue}
                                    </View>
                                  </View>
                                ))}
                            </View>
                          )}
                        </View>
                      </View>
                    ))}

                  {form.skuParentList.length == 2 && (
                    <View style={{ padding: "10px 50px" }}>
                      <Button
                        block
                        size="small"
                        color="danger"
                        variant="outlined"
                        onClick={() => {
                          form.skuParentList.splice(1, 1);
                          createSkuItemList(form);
                        }}
                      >
                        删除规格
                      </Button>
                    </View>
                  )}
                </View>

                <View
                  style={{ padding: "10px 0", fontSize: "14px", color: "#555" }}
                >
                  批量编辑内容 (有值才会进行覆盖)
                </View>
                <Form.Item>
                  <Form.Label>现价</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入现价"
                      value={form1.presentPrice}
                      onChange={(e) =>
                        setForm1({ ...form1, presentPrice: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item>
                  {/* <Form.Control>
                    <Field
                      label="产品识别码"
                      ref={originalUnitRef}
                      name="originalUnit13231"
                      clickable
                      isLink
                      style={{ padding: "0px" }}
                    >
                      <Input
                        readonly
                        placeholder="产品识别码"
                        onClick={() => setOpen5(true)}
                      />
                    </Field>
                  </Form.Control> */}
                  <Form.Label>产品识别码</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入产品识别码"
                      value={form1.originalUnit}
                      onChange={(e) =>
                        setForm1({ ...form1, originalUnit: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item>
                  <Form.Label>库存</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入库存"
                      value={form1.stock}
                      onChange={(e) =>
                        setForm1({ ...form1, stock: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item>
                  <Form.Label>长</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入长"
                      value={form1.volumeWide}
                      onChange={(e) =>
                        setForm1({ ...form1, volumeWide: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item>
                  <Form.Label>宽</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入宽"
                      value={form1.volumeLong}
                      onChange={(e) =>
                        setForm1({ ...form1, volumeLong: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item>
                  <Form.Label>高</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入高"
                      value={form1.volumeHigh}
                      onChange={(e) =>
                        setForm1({ ...form1, volumeHigh: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item>
                  {/* <Form.Control>
                    <Field
                      label="重量"
                      ref={minNumUnitRef}
                      name="minNumUnit11"
                      clickable
                      isLink
                      style={{ padding: "0px" }}
                    >
                      <Input
                        readonly
                        placeholder="重量"
                        onClick={() => setOpen6(true)}
                      />
                    </Field>
                  </Form.Control> */}
                  <Form.Label>重量</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入重量"
                      value={form1.weight}
                      onChange={(e) =>
                        setForm1({ ...form1, weight: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
                <Form.Item>
                  <Form.Label>样本价格</Form.Label>
                  <Form.Control>
                    <Input
                      placeholder="请输入样本价格"
                      value={form1.samples}
                      onChange={(e) =>
                        setForm1({ ...form1, samples: e.detail.value })
                      }
                    />
                  </Form.Control>
                </Form.Item>
              </Cell.Group>
              <View
                style={{
                  margin: "1rem",
                  display: "flex",
                  alignItems: "center",
                  gap: "30px",
                }}
              >
                <Button
                  block
                  color="primary"
                  variant="outlined"
                  onClick={() => batchEditing()}
                >
                  批量编辑
                </Button>
              </View>
              <View style={{ padding: "0 10px" }}>
                <View
                  style={{ fontSize: "14px", padding: "10px 0", color: "#555" }}
                >
                  SKU列表 请先确认好规格后编辑规格列表， 添加和删除规格操作
                  会将列表内容 清空 {form.skuItemList.length}
                </View>
                <View
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: "20px",
                  }}
                >
                  {form.skuItemList.map((item, index) => (
                    <View
                      key={index}
                      style={{
                        boxShadow: "0 0 .3125rem 0 hsla(0, 0%, 49%, 0.45)",
                      }}
                    >
                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="货号"
                        >
                          {item.skuSerialNumber}
                        </Field>
                      </View>
                      {form.skuParentList &&
                        form.skuParentList.map((item1, index1) => (
                          <View>
                            <Field
                              style={{
                                borderBottom: "1px solid #ebedf0",
                              }}
                              label={item1.skuName}
                            >
                              {
                                item1.skuChildList.find(
                                  (item2) =>
                                    item2.skuValueId ===
                                    item.skuValueArray.split(";")[index1]
                                )?.skuValue
                              }
                              {/* {
                              item1.skuChildList[item[`index${index1}`]]
                                ?.skuValue
                            } */}
                            </Field>
                          </View>
                        ))}

                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="SKU号"
                        >
                          <Input
                            value={item.specificationsName}
                            placeholder="请输入SKU"
                            onChange={(e) => {
                              form.skuItemList.splice(index, 1, {
                                ...item,
                                specificationsName: e.detail.value,
                              });
                              setForm({ ...form });
                            }}
                          />
                        </Field>
                      </View>
                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="现价"
                        >
                          <Input
                            placeholder="请输入现价"
                            value={item.presentPrice}
                            onChange={(e) => {
                              form.skuItemList.splice(index, 1, {
                                ...item,
                                presentPrice: e.detail.value,
                              });
                              setForm({ ...form });
                            }}
                          />
                        </Field>
                      </View>
                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="产品识别码"
                          // isLink
                          // clickable
                          // onClick={() => {
                          //   currentIndex.current = index;
                          //   setOpen7(true);
                          // }}
                        >
                          {/* <Input
                            readonly
                            placeholder="请输入产品识别码"
                            value={item.originalUnitName}
                          /> */}
                          <Input
                            placeholder="请输入产品识别码"
                            value={item.originalUnit}
                            onChange={(e) => {
                              form.skuItemList.splice(index, 1, {
                                ...item,
                                originalUnit: e.detail.value,
                              });
                              setForm({ ...form });
                            }}
                          />
                        </Field>
                      </View>
                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="库存"
                        >
                          <Input
                            placeholder="请输入库存"
                            value={item.stock}
                            onChange={(e) => {
                              form.skuItemList.splice(index, 1, {
                                ...item,
                                stock: e.detail.value,
                              });
                              setForm({ ...form });
                            }}
                          />
                        </Field>
                      </View>
                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="长"
                        >
                          <Input
                            placeholder="请输入长"
                            value={item.volumeWide}
                            onChange={(e) => {
                              form.skuItemList.splice(index, 1, {
                                ...item,
                                volumeWide: e.detail.value,
                              });
                              setForm({ ...form });
                            }}
                          />
                        </Field>
                      </View>
                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="宽"
                        >
                          <Input
                            placeholder="请输入宽"
                            value={item.volumeLong}
                            onChange={(e) => {
                              form.skuItemList.splice(index, 1, {
                                ...item,
                                volumeLong: e.detail.value,
                              });
                              setForm({ ...form });
                            }}
                          />
                        </Field>
                      </View>
                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="高"
                        >
                          <Input
                            placeholder="请输入高"
                            value={item.volumeHigh}
                            onChange={(e) => {
                              form.skuItemList.splice(index, 1, {
                                ...item,
                                volumeHigh: e.detail.value,
                              });
                              setForm({ ...form });
                            }}
                          />
                        </Field>
                      </View>
                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="重量"
                          // isLink
                          // clickable
                          // onClick={() => {
                          //   currentIndex.current = index;
                          //   setOpen8(true);
                          // }}
                        >
                          {/* <Input
                            readonly
                            placeholder="请输入重量"
                            value={item.minNumUnitName}
                          /> */}
                          <Input
                            placeholder="请输入重量"
                            value={item.weight}
                            onChange={(e) => {
                              form.skuItemList.splice(index, 1, {
                                ...item,
                                weight: e.detail.value,
                              });
                              setForm({ ...form });
                            }}
                          />
                        </Field>
                      </View>
                      <View>
                        <Field
                          style={{
                            borderBottom: "1px solid #ebedf0",
                          }}
                          label="样本价格"
                        >
                          <Input
                            placeholder="请输入样本价格"
                            value={item.samples}
                            onChange={(e) => {
                              form.skuItemList.splice(index, 1, {
                                ...item,
                                samples: e.detail.value,
                              });
                              setForm({ ...form });
                            }}
                          />
                        </Field>
                      </View>
                      <View style={{ padding: "14px 50px" }}>
                        <Button
                          block
                          color="danger"
                          size="small"
                          variant="outlined"
                        >
                          删除
                        </Button>
                      </View>
                    </View>
                  ))}
                </View>
              </View>
              <View>
                <Cell.Group style={{ margin: 0 }} inset>
                  <Form.Item
                    style={{ flexDirection: "column", gap: ".625rem" }}
                  >
                    <Form.Label style={{ width: "100%" }}>
                      <Text>
                        产品主图
                        <Text style={{ fontSize: ".75rem", color: "red" }}>
                          推荐尺寸 800*800,图片最大不能超过500KB
                        </Text>
                      </Text>
                    </Form.Label>
                    <Form.Control>
                      <Uploader>
                        <View
                          style={{
                            display: "flex",
                            flexWrap: "wrap",
                            gap: ".3125rem",
                          }}
                        >
                          {form.detailsImage &&
                            form.detailsImage.split(",").map((item, index) => (
                              <Uploader.Image
                                key={index}
                                url={process.env.TARO_APP_API + item}
                                mode="aspectFill"
                                onClick={(e) => {
                                  e.preventDefault();
                                  e.stopPropagation();
                                  priviewImage(form.detailsImage, index);
                                }}
                                onRemove={(e) => {
                                  e.preventDefault();
                                  e.stopPropagation();
                                  let arr = form.detailsImage.split(",");
                                  arr.splice(index, 1);
                                  setForm({
                                    ...form,
                                    detailsImage: arr.join(","),
                                  });
                                }}
                              ></Uploader.Image>
                            ))}
                          <Uploader.Upload
                            onClick={() => onUpload("detailsImage", 1)}
                          />
                        </View>
                      </Uploader>
                    </Form.Control>
                  </Form.Item>
                  <Form.Item
                    style={{ flexDirection: "column", gap: ".625rem" }}
                  >
                    <Form.Label style={{ width: "100%" }}>
                      <Text>
                        产品视频
                        <Text style={{ fontSize: ".75rem", color: "red" }}>
                          mp4格式
                        </Text>
                      </Text>
                    </Form.Label>
                    <Form.Control>
                      <Uploader>
                        <View
                          style={{
                            display: "flex",
                            flexWrap: "wrap",
                            gap: ".3125rem",
                          }}
                        >
                          {form.detailsVideo && (
                            <Uploader.Image
                              url={videoPng}
                              mode="aspectFill"
                              onClick={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                priviewImage(form.detailsVideo, 0, "video");
                              }}
                              onRemove={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                                setForm({
                                  ...form,
                                  detailsVideo: "",
                                });
                              }}
                            ></Uploader.Image>
                          )}
                          <Uploader.Upload
                            onClick={() => onUpload("detailsVideo", 1, "video")}
                          />
                        </View>
                      </Uploader>
                    </Form.Control>
                  </Form.Item>
                  <Form.Item name="introduce">
                    <Form.Label>产品介绍</Form.Label>
                    <Form.Control>
                      <Textarea
                        value={form.introduce}
                        onChange={(e) =>
                          setForm({ ...form, introduce: e.detail.value })
                        }
                        style={{ height: "80px" }}
                        limit={255}
                        placeholder="请输入产品介绍"
                      />
                    </Form.Control>
                  </Form.Item>
                </Cell.Group>
              </View>
              <View
                style={{
                  margin: "1rem 0",
                  display: "flex",
                  alignItems: "center",
                  gap: "10px",
                  paddingBottom: "20px",
                }}
              >
                <Button shape="round" block color="primary" formType="submit">
                  确定
                </Button>
                <Button
                  onClick={() => saveLocal()}
                  shape="round"
                  block
                  color="info"
                >
                  保存到本地
                </Button>
                {show1 && (
                  <Button
                    onClick={() => clearLocal()}
                    shape="round"
                    block
                    color="danger"
                  >
                    清空缓存
                  </Button>
                )}
              </View>
            </Form>
          </View>
        </ScrollView>
      </Popup>

      {/* 产品分类 */}
      <ConfigProvider
        theme={{
          backdropZIndex: 1010,
        }}
      >
        <Popup
          open={open1}
          rounded
          placement="bottom"
          onClose={() => {
            setOpen1(false);
          }}
          style={{ zIndex: 1011 }}
          lock={false}
        >
          <ScrollView style={{ maxHeight: "80vh" }} scrollY>
            <View style={{ padding: ".875rem" }}>
              <Checkbox.Group
                value={productList
                  .filter((item) => item.select)
                  .map((item) => item.id)}
              >
                <View
                  style={{
                    display: "flex",
                    gap: ".625rem",
                    flexWrap: "wrap",
                    alignContent: "center",
                  }}
                >
                  {productList.map((item, index) => (
                    <Checkbox
                      style={{ marginBottom: "0" }}
                      key={item.id}
                      checked={item.select}
                      onChange={(value) => {
                        productList.splice(index, 1, {
                          ...item,
                          select: value,
                        });
                        setProductList([...productList]);
                      }}
                      name={item.id}
                    >
                      {item.categoryName}
                    </Checkbox>
                  ))}
                </View>
                <View style={{ padding: "1.25rem 0" }}>
                  <Button
                    block
                    color="primary"
                    onClick={() => {
                      setOpen1(false);
                      itemRef.current?.setValue(
                        productList
                          .filter((item) => item.select)
                          .map((item) => item.categoryName)
                          .join(",")
                      );
                      setForm({
                        ...form,
                        categoryId: productList
                          .filter((item) => item.select)
                          .map((item) => item.id)
                          .join(","),
                      });
                      Taro.nextTick(() => {
                        const value = productList.map((item) => ({
                          ...item,
                          select: false,
                        }));
                        setProductList([...value]);
                      });
                    }}
                  >
                    确定
                  </Button>
                </View>
              </Checkbox.Group>
            </View>
          </ScrollView>
        </Popup>
      </ConfigProvider>

      {/* 运输方式 */}
      <ConfigProvider
        theme={{
          backdropZIndex: 1010,
        }}
      >
        <Popup
          open={open2}
          rounded
          placement="bottom"
          onClose={() => {
            setOpen2(false);
          }}
          style={{ zIndex: 1011 }}
          lock={false}
        >
          <ScrollView style={{ maxHeight: "80vh" }} scrollY>
            <View style={{ padding: ".875rem" }}>
              <Checkbox.Group
                value={shipment
                  .filter((item) => item.select)
                  .map((item) => item.dictValue)}
              >
                <View
                  style={{
                    display: "flex",
                    gap: ".625rem",
                    flexWrap: "wrap",
                    alignContent: "center",
                  }}
                >
                  {shipment.map((item, index) => (
                    <Checkbox
                      style={{ marginBottom: "0" }}
                      checked={item.select}
                      key={item.dictValue}
                      onChange={(value) => {
                        shipment.splice(index, 1, {
                          ...item,
                          select: value,
                        });
                        setShipment([...shipment]);
                      }}
                      name={item.dictValue}
                    >
                      {item.dictLabel}
                    </Checkbox>
                  ))}
                </View>
                <View style={{ padding: "1.25rem 0" }}>
                  <Button
                    block
                    color="primary"
                    onClick={() => {
                      setOpen2(false);
                      console.log(itemRef.current, itemRef1.current);
                      itemRef1.current?.setValue(
                        shipment
                          .filter((item) => item.select)
                          .map((item) => item.dictLabel)
                          .join(",")
                      );
                      setForm({
                        ...form,
                        modeOfShipment: shipment
                          .filter((item) => item.select)
                          .map((item) => item.dictLabel)
                          .join(","),
                      });
                      Taro.nextTick(() => {
                        setShipment([
                          ...shipment.map((item) => ({
                            ...item,
                            select: false,
                          })),
                        ]);
                      });
                    }}
                  >
                    确定
                  </Button>
                </View>
              </Checkbox.Group>
            </View>
          </ScrollView>
        </Popup>
      </ConfigProvider>

      {/* 价格类型 */}
      <ConfigProvider
        theme={{
          backdropZIndex: 1010,
        }}
      >
        <Popup
          open={open3}
          rounded
          placement="bottom"
          onClose={setOpen3}
          style={{ zIndex: 1011 }}
        >
          <Picker
            title="价格类型"
            columns={unit}
            onCancel={() => setOpen3(false)}
            onConfirm={(newValue, obj) => {
              setForm({
                ...form,
                originalUnit: obj[0].label,
                originalUnitName: obj[0].label,
              });
              setOpen3(false);
            }}
          ></Picker>
        </Popup>
      </ConfigProvider>

      {/* 订购量类型 */}
      <ConfigProvider
        theme={{
          backdropZIndex: 1010,
        }}
      >
        <Popup
          open={open4}
          rounded
          placement="bottom"
          onClose={setOpen4}
          style={{ zIndex: 1011 }}
        >
          <Picker
            title="订购量类型"
            columns={moneys}
            onCancel={() => setOpen4(false)}
            onConfirm={(newValue, obj) => {
              setForm({
                ...form,
                minNumUnit: newValue[0],
                minNumUnitName: obj[0].label,
              });
              setOpen4(false);
            }}
          ></Picker>
        </Popup>
      </ConfigProvider>

      {/* 价格类型1 */}
      <ConfigProvider
        theme={{
          backdropZIndex: 1010,
        }}
      >
        <Popup
          open={open5}
          rounded
          placement="bottom"
          onClose={setOpen5}
          style={{ zIndex: 1011 }}
        >
          <Picker
            title="价格类型"
            columns={unit}
            onCancel={() => setOpen5(false)}
            onConfirm={(newValue, obj) => {
              originalUnitRef.current?.setValue(obj[0].label);
              setForm1({
                ...form1,
                originalUnit: newValue[0],
                originalUnitName: obj[0].label,
              });
              setOpen5(false);
            }}
          ></Picker>
        </Popup>
      </ConfigProvider>
      {/* 订购量类型1 */}
      <ConfigProvider
        theme={{
          backdropZIndex: 1010,
        }}
      >
        <Popup
          open={open6}
          rounded
          placement="bottom"
          onClose={setOpen6}
          style={{ zIndex: 1011 }}
        >
          <Picker
            title="订购量类型"
            columns={moneys}
            onCancel={() => setOpen6(false)}
            onConfirm={(newValue, obj) => {
              minNumUnitRef.current?.setValue(obj[0].label);
              setForm1({
                ...form1,
                minNumUnit: newValue[0],
                minNumUnitName: obj[0].label,
              });
              setOpen6(false);
            }}
          ></Picker>
        </Popup>
      </ConfigProvider>
      {/* 价格类型2 */}
      <ConfigProvider
        theme={{
          backdropZIndex: 1010,
        }}
      >
        <Popup
          open={open7}
          rounded
          placement="bottom"
          onClose={setOpen7}
          style={{ zIndex: 1011 }}
        >
          <Picker
            title="价格类型"
            columns={unit}
            onCancel={() => setOpen7(false)}
            onConfirm={(newValue, obj) => {
              form.skuItemList[currentIndex.current].originalUnit = newValue[0];
              form.skuItemList[currentIndex.current].originalUnitName =
                obj[0].label;
              setForm({
                ...form,
              });
              setOpen7(false);
            }}
          ></Picker>
        </Popup>
      </ConfigProvider>
      {/* 订购量类型2 */}
      <ConfigProvider
        theme={{
          backdropZIndex: 1010,
        }}
      >
        <Popup
          open={open8}
          rounded
          placement="bottom"
          onClose={setOpen8}
          style={{ zIndex: 1011 }}
        >
          <Picker
            title="订购量类型"
            columns={moneys}
            onCancel={() => setOpen8(false)}
            onConfirm={(newValue, obj) => {
              form.skuItemList[currentIndex.current].minNumUnit = newValue[0];
              form.skuItemList[currentIndex.current].minNumUnitName =
                obj[0].label;
              setForm({
                ...form,
              });
              setOpen8(false);
            }}
          ></Picker>
        </Popup>
      </ConfigProvider>
    </View>
  );
}
